<template>
  <div id="about">
    <div id="about_left">
      <div id="sysinfo">
        <p>系统简介</p>
        <el-card id="mcard2">
          <el-card class="innercard2" shadow="hover">
            <h3><i class="el-icon-circle-check"></i>项目由来</h3>
            <p>
              在第二次全体会议中，师兄师姐们开会时提出：尝试编写“实验室人员管理记录系统”。于是就有了今天的系统。
            </p>
            <h3><i class="el-icon-document-checked"></i>系统主要功能</h3>
            <p>1.申请借出元器件</p>
            <p>2.申请归还元器件</p>
            <p>3.管理端审核元器件的借出和归还事宜</p>
            <p>4.查询个人的详细借出和归还记录</p>
            <p>5.管理人员查看所有的借出和归还记录</p>
            <p>6.管理人员对元器件数据库进行增删查改</p>
          </el-card>
        </el-card>
      </div>
    </div>
    <div id="about_right">
      <div id="developrs">
        <p>开发人员简介</p>
        <el-card id="mcard">
          <p>
            本系统由实验室的<span style="color: green"
              >曹大典、阳苗、唐春秀、饶有财、陈柚宏</span
            >五位同学合力开发
          </p>
          <p>其中分工如下</p>
          <el-scrollbar style="height: 450px" :horizontal="false">
            <div style="height: 777px; background-color: #f0f0f0">
              <el-card class="innercard" shadow="hover">
                <h2><i class="el-icon-circle-check"></i>前端</h2>
                <h3>曹大典</h3>
                <h2><i class="el-icon-data-line"></i>主要工作</h2>
                <h3>前端用户端页面开发</h3>
              </el-card>
              <el-card class="innercard" shadow="hover">
                <h2><i class="el-icon-circle-check"></i>前端</h2>
                <h3>阳苗</h3>
                <h2><i class="el-icon-data-line"></i>主要工作</h2>
                <h3>前端UI设计与网站测试</h3>
              </el-card>
              <el-card class="innercard" shadow="hover">
                <h2><i class="el-icon-circle-check"></i>后端</h2>
                <h3>唐春秀</h3>
                <h2><i class="el-icon-data-line"></i>主要工作</h2>
                <h3>数据库设计与部分后端开发</h3>
              </el-card>
              <el-card class="innercard" shadow="hover">
                <h2><i class="el-icon-circle-check"></i>前端</h2>
                <h3>饶有财</h3>
                <h2><i class="el-icon-data-line"></i>主要工作</h2>
                <h3>前端管理端页面开发</h3>
              </el-card>
              <el-card class="innercard" shadow="hover">
                <h2><i class="el-icon-circle-check"></i>后端</h2>
                <h3>陈柚宏</h3>
                <h2><i class="el-icon-data-line"></i>主要工作</h2>
                <h3>后端程序设计</h3>
              </el-card>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
  </div>
</template>
 
 <style>


#about {
  width: 96%;
  height: 670px;
  margin: auto;
}

#about_left {
  width: 48%;
  height: 100%;
  float: left;
}

#about_right {
  width: 48%;
  height: 100%;
  float: left;
}

#developrs {
  width: 95%;
  min-width: 95%;
  min-height: 630px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: inset;
  color: white;
  padding: 10px;
  background-color: #6f846450;
}

#mcard {
  width: 95%;
  padding: 5px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 5px;
  min-height: 500px;
}


#mcard .el-scrollbar__wrap {
    overflow-x: hidden;
  }

.innercard h3 {
  color: green;
}

#sysinfo {
  width: 95%;
  min-width: 95%;
  min-height: 630px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: inset;
  color: white;
  padding: 10px;
  background-color: #6f846450;
}

#mcard2 {
  width: 95%;
  padding: 5px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 5px;
  min-height: 500px;
}

#mcard2 * {
  text-align: left;
  margin: 0 auto;
  margin-top: 10px;
}

.innercard2 {
  width: 450px;
}

.innercard2 p {
  color: green;
}
</style>